<template>
  <div class="tab">
    <div class="first iconfont icon-changdu"></div>
    <div class="two iconfont icon-yuzhi"></div>
    <div class="iconfont three icon-siwangdengji"></div>
    <div class="iconfont four icon-jiankangma"></div>
    <div class="iconfont five icon-ganranke"></div>

    <el-collapse>
      <el-collapse-item :title="'时间步长:    ' + step" name="1" disabled>
      </el-collapse-item>
      <el-collapse-item :title="getMax()" name="2" disabled> </el-collapse-item>

      <el-collapse-item
        :title="changeName('死亡人数:    ', 'DeathNumber')"
        name="3"
        disabled
      >
      </el-collapse-item>
      <el-collapse-item
        :title="changeName('健康人数:    ', 'agent')"
        name="4"
        disabled
        style="background-color: #a5a4a1"
      >
      </el-collapse-item>
      <el-collapse-item
        :title="changeName('感染人数:    ', 'infectedagentCount')"
        name="5"
        class="ax"
      >
        <div
          style="
            height: 35px;
            line-height: 35px;
            border-top: 1px solid #fff;
            margin-left: 50px;
          "
        >
          潜伏期:{{
            data.infectedagentLatentCount ? data.infectedagentLatentCount : 0
          }}
        </div>
        <div
          style="
            height: 35px;
            line-height: 35px;
            border-top: 1px solid #fff;
            margin-left: 50px;
          "
        >
          发病期:{{
            data.infectedagentOnsetCount ? data.infectedagentOnsetCount : 0
          }}
        </div>
        <div
          style="
            height: 35px;
            line-height: 35px;
            border-top: 1px solid #fff;
            margin-left: 50px;
          "
        >
          重症期:{{
            data.infectedagentSevereCount ? data.infectedagentSevereCount : 0
          }}
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    data: {
      type: Object,
      default: {},
    },
  },
  data() {
    //这里存放数据
    return {
      step: "1h",
    };
  },
  //计算属性 类似于data概念
  computed: {
    dataIcon() {},
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleNodeClick() {},
    changeName(name, getName) {
      if (!this.data) return name + "0";

      if (!this.data[getName]) {
        return name + "0";
      } else {
        return name + this.data[getName];
      }
    },
    getMax() {
      if (this.data && this.data.agent) {
        return (
          "医疗资源(单位/人):     " +
          Math.floor((this.data.agent + this.data.infectedagentCount) * 0.02)
        );
      } else {
        return "医疗资源(单位/人): 0";
      }
    },
  },
  //声明周期 - 创建完成（可以访问当前this实例）
  created() {},
  //声明周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.$bus.$on("getStep", (data) => {
      if (data == 1) {
        this.step = "1h";
      } else {
        this.step = "12h";
      }
    });
  },
  watch: {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="less">
.tab {
  border-radius: 5px;
  box-shadow: 0 1 1 rgba(0, 0, 0, 0.1);
  height: 150px;
  width: 220px;
  background-color: rgba(0, 0, 0, 0.2);

  z-index: 31;
  position: absolute;
  top: 102px;
  left: 22px;

  // .tab1>div{

  //     height: 25px;
  //     width: 25px;
  //     background-color:#f7958a;
  //     border-radius: 50%;

  // }

  // .tab2>div{
  //     height: 50px;
  //     width: 50px;
  //     background-color:#73da90;

  // }
  //   .tab3>div{
  //     height: 50px;
  //     width: 50px;
  //     background-color:#facb7b;

  // }

  .tab1,
  .tab2,
  .tab3 {
    display: flex;
    height: 40px;
    margin: 5px 0;
  }

  .tab1 .left {
    flex: 1;
    position: relative;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    > div {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 25px;
      height: 25px;
      // background-color: #f7958a;
      border-radius: 50%;
      background-color: yellow;
    }
  }
  .tab1 .right {
    flex: 4;

    line-height: 40px;
  }

  .tab2 .left {
    flex: 1;
    position: relative;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    > div {
      background-color: red;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 25px;
      height: 25px;
      // background-color: #73da90;
      border-radius: 50%;
    }
  }
  .tab2 .right {
    flex: 4;
    text-align: left;
    line-height: 40px;
  }

  .tab3 .left {
    flex: 1;
    position: relative;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    > div {
      background-color: blue;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 25px;
      height: 25px;
      // background-color: #facb7b;
      border-radius: 50%;
    }
  }
  .tab3 .right {
    flex: 4;
    text-align: left;
    line-height: 40px;
  }

  .top {
    margin-left: 25px;
  }
}
/deep/ .el-collapse-item__arrow {
  display: none;
}

/deep/ .ax .el-collapse-item__arrow {
  display: block;
}
/deep/ .el-collapse-item.is-disabled .el-collapse-item__header {
  color: black;
  cursor: pointer;
}
/deep/ .el-collapse-item__header {
  background-color: rgba(0, 0, 0, -0.9);
  margin-left: 50px;
}
/deep/ .el-collapse-item__content {
  padding-bottom: 0;
  background-color: #a5a4a1;
}

/deep/ .el-collapse-item {
  position: relative;
  // &::before {
  //   content: "";
  //   height: 30px;
  //   width: 30px;
  //   position: absolute;
  //   border-radius: 50%;
  //   background-color: #fff;
  //   top: 24px;
  //  transform: translateY(-50%);
  //  margin-left: 5px;
  // }
}

.el-collapse {
  background-color: rgba(0, 0, 0, 0.1);
}

.first {
  position: absolute;
  top: 9px;
  width: 30px;
  height: 30px;
  // background-color: burlywood;
  color: #fff;
  border-radius: 50%;
  line-height: 30px;
  text-align: center;
  font-size: 23px;
  left: 10px;
}

.two {
  position: absolute;
  top: 57px;
  width: 30px;
  height: 30px;
  // background-color: yellow;
  color: #fff;
  text-align: center;
  font-size: 23px;
  line-height: 30px;
  border-radius: 50%;
  left: 10px;
}
.three {
  position: absolute;
  top: 105px;
  width: 30px;
  height: 30px;
  color: black;
  line-height: 30px;
  text-align: center;
  font-size: 31px;
  border-radius: 50%;
  left: 10px;
}
.four {
  position: absolute;
  top: 153px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 23px;
  color: blue;
  border-radius: 50%;
  left: 10px;
  z-index: 33;
}
.five {
  position: absolute;
  top: 201px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 31px;
  color: red;
  border-radius: 50%;
  left: 10px;
  z-index: 33;
}

.ax {
  background-color: #a5a4a1;
}
</style>
